<!DOCTYPE html>
<html>
<script>
  internals.settings.setViewportEnabled(true);
  internals.settings.setViewportMetaEnabled(true);
</script>
<head>
<title>Test that overflow-x: hidden with a large viewport doesn't clip the controls</title>
<meta name='viewport' content='width=800'>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
</head>
<style>
body {
  overflow-x: hidden;
}
</style>
<body>
  <video controls width=400 style='padding: 900px'></video>
  <video controls width=800 style='padding: 900px'></video>
  <video controls width=1200 style='padding: 900px'></video>
  <video controls width=600 style='padding: 900px'></video>
</body>
<script>
test(_ => {
  var videos = document.querySelectorAll('video');
  for (var video, i = 0; video = videos[i]; ++i) {
    video.src = '../content/test.ogv';
  }

  var forceLayout = document.body.offsetHeight;

  assert_equals(getComputedStyle(mediaControlsButton(videos[0], 'panel')).width, '400px');
  assert_equals(getComputedStyle(mediaControlsButton(videos[1], 'panel')).width, '800px');
  assert_equals(getComputedStyle(mediaControlsButton(videos[2], 'panel')).width, '1200px');
  assert_equals(getComputedStyle(mediaControlsButton(videos[3], 'panel')).width, '600px');
});
</script>
</html>
